<template>
	<el-dialog
		:title="
			`代理${curData.proxyName}的${curData.venueName}返点重算调整详情`
		"
		:visible="visible"
		width="1200px"
		class="rempadding"
		:destroy-on-close="true"
		:before-close="handleClose"
		@close="handleClose"
	>
		<div>统计日期：{{ curData.cycleName }}</div>
		<div style="margin-top: 10px;" v-if="curData.venueName === '全部'">
			<el-checkbox
				v-model="selectAllVenue"
				@change="selectAllVenueMethod"
				style="margin-right: 1.2rem"
			>
				{{ $t('operation.activity_list.all_select') }}
			</el-checkbox>
			<el-checkbox-group
				v-model="venueCodes"
				@change="venueCodesChange"
				style="display: inline-block;"
			>
				<el-checkbox
					v-for="(item, index) in venueNameList"
					:label="item.gameCode"
					:key="index"
					style="margin-right: 1.2rem"
				>
					{{ item.venueName }}
				</el-checkbox>
			</el-checkbox-group>
		</div>
		<el-table
			v-loading="loading"
			element-loading-spinner="el-icon-loading"
			size="mini"
			class="small-size-table"
			:data="data"
			border
			style="width: 100%; margin: 15px 0"
			:max-height="tableHeight"
			:header-cell-style="getRowClass"
			:span-method="objectSpanMethod"
			highlight-current-row
		>
			<el-table-column prop="memberName" align="center" label="会员账号">
				<template slot-scope="scope">
					<span>
						{{ scope.row.memberName || '-' }}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				prop="betOrderNo"
				align="center"
				show-overflow-tooltip
				width="200px"
				label="注单号"
			></el-table-column>
			<el-table-column prop="userName" align="center" label="注单">
				<template slot-scope="scope">
					<span>
						{{ `第${scope.row.obSettleCount}次结算` }}
					</span>
				</template>
			</el-table-column>
			<el-table-column prop="netAt" align="center" label="结算时间">
				<template slot-scope="scope">
					<span>
						{{ scope.row.netAt || '-' }}
					</span>
				</template>
			</el-table-column>
			<el-table-column prop="userName" align="center" label="注单状态">
				<template slot-scope="scope">
					<span
						v-if="scope.row.settlementStatus === 1"
						class="lightGreenColor"
					>
						已结算
					</span>
					<span
						v-if="scope.row.settlementStatus === 2"
						class="yellowBackground"
					>
						已取消
					</span>
				</template>
			</el-table-column>
			<el-table-column prop="betAmount" align="center" label="投注金额">
				<template slot-scope="scope">
					<span>
						{{ scope.row.betAmount || '-' }}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				width="200px"
				prop="userName"
				align="center"
				label="游戏输赢"
			>
				<template slot-scope="scope">
					<span :style="handleNumberColor(scope.row.netAmount)">
						{{ handleTotalNumber('USDT', scope.row.netAmount) }}
					</span>
					<span
						v-if="
							scope.row.netAmountRecalculateAdjust &&
								scope.row.towShow
						"
						:style="
							handleNumberColor(
								scope.row.netAmountRecalculateAdjust
							)
						"
					>
						<span v-if="scope.row.netAmountRecalculateAdjust < 0">
							↓
						</span>
						<span v-else>↑</span>
						<span>(</span>
						<span>
							{{
								handleTotalNumber(
									'USDT',
									scope.row.netAmountRecalculateAdjust
								)
							}}
						</span>
						<span>)</span>
					</span>
				</template>
			</el-table-column>
			<el-table-column
				width="200px"
				prop="userName"
				align="center"
				label="有效投注"
			>
				<template slot-scope="scope">
					<span :style="handleNumberColor(scope.row.validBetAmount)">
						{{
							handleTotalNumber('USDT', scope.row.validBetAmount)
						}}
					</span>
					<span
						v-if="
							scope.row.validBetAmountRecalculateAdjust &&
								scope.row.towShow
						"
						:style="
							handleNumberColor(
								scope.row.validBetAmountRecalculateAdjust
							)
						"
					>
						<span
							v-if="scope.row.validBetAmountRecalculateAdjust < 0"
						>
							↓
						</span>
						<span v-else>↑</span>
						<span>(</span>
						<span>
							{{
								handleTotalNumber(
									'USDT',
									scope.row.validBetAmountRecalculateAdjust
								)
							}}
						</span>
						<span>)</span>
					</span>
				</template>
			</el-table-column>
			<el-table-column
				prop="teamRebateRate"
				align="center"
				label="团队返点比例"
				width="200px"
			>
				<template slot-scope="scope">
					<span>
						{{ handlePercentage(scope.row.teamRebateRateParent) }}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				width="200px"
				prop="userName"
				align="center"
				label="有效投注团队返点"
			>
				<template slot-scope="scope">
					<span
						:style="handleNumberColor(scope.row.teamRebateAmount)"
					>
						{{
							handleTotalNumber(
								'USDT',
								scope.row.teamRebateAmount
							)
						}}
					</span>
					<span
						v-if="
							scope.row.teamRebateAmountRecalculateAdjust &&
								scope.row.towShow
						"
						:style="
							handleNumberColor(
								scope.row.teamRebateAmountRecalculateAdjust
							)
						"
					>
						<span
							v-if="
								scope.row.teamRebateAmountRecalculateAdjust < 0
							"
						>
							↓
						</span>
						<span v-else>↑</span>
						<span>(</span>
						<span>
							{{
								handleTotalNumber(
									'USDT',
									scope.row.teamRebateAmountRecalculateAdjust
								)
							}}
						</span>
						<span>)</span>
					</span>
				</template>
			</el-table-column>
			<el-table-column
				prop="teamRebateAmountRecalculateAdjust"
				align="center"
				label="团队返点重算调整"
				width="200px"
			>
				<template slot-scope="scope">
					<span
						:style="
							handleNumberColor(
								scope.row
									.teamRebateAmountRecalculateAdjustParent
							)
						"
					>
						{{
							handleTotalNumber(
								'USDT',
								scope.row
									.teamRebateAmountRecalculateAdjustParent
							)
						}}
					</span>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			class="paginationBox"
			:current-page.sync="pageNum"
			background
			layout="total, sizes,prev, pager, next, jumper"
			:page-size.sync="pageSize"
			:page-sizes="pageSizes"
			:total="total"
			:pager-count="9"
			@current-change="handleCurrentChange"
			@size-change="handleSizeChange"
		></el-pagination>
	</el-dialog>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'

export default {
	components: {},
	mixins: [list],
	props: {
		curData: {
			type: Object,
			default: {}
		},
		visible: {
			type: Boolean,
			default: false
		},
		handleVisible: {
			type: Object,
			default: () => {}
		},
		searchTime: {
			type: Array,
			default: () => []
		}
	},
	watch: {
		venueCodes: {
			handler(newVal) {
				if (newVal.length === this.venueNameList.length) {
					this.selectAllVenue = true
				} else {
					this.selectAllVenue = false
				}
			}
		}
	},
	data() {
		return {
			businessModelData: '',
			loading: false,
			selectAllVenue: true,
			total: 0,
			tableHeight: 480,
			venueCodes: [],
			venueNameList: [
				// {
				// 	venueName: 'DX德州',
				// 	gameCode: 'dz'
				// },
				{
					venueName: '其他场馆',
					gameCode: 'other'
				},
				{
					venueName: 'DB体育',
					gameCode: 'ty'
				},
				{
					venueName: 'DB真人',
					gameCode: 'zr'
				},
				// {
				// 	venueName: '博雅棋牌',
				// 	gameCode: 'qp'
				// },
				{
					venueName: 'DB电竞',
					gameCode: 'dj'
				},
				{
					venueName: 'DB彩票',
					gameCode: 'cp'
				}
				// {
				// 	venueName: 'DB电子',
				// 	gameCode: 'dy'
				// }
			],
			data: []
		}
	},
	mounted() {
		if (this.curData.venueName === '全部') {
			this.getVenueName()
		} else {
			this.getData()
		}
	},
	methods: {
		getVenueName(val) {
			for (const item of this.venueNameList) {
				this.venueCodes.push(item.gameCode)
			}
			this.getData()
		},
		objectSpanMethod({ row, column, rowIndex, columnIndex }) {
			if (
				columnIndex === 0 ||
				columnIndex === 1 ||
				columnIndex === 8 ||
				columnIndex === 10
			) {
				if (row.proxyMemberRecalculateBetRecordList) {
					return {
						rowspan: row.proxyMemberRecalculateBetRecordList,
						colspan: 1
					}
				} else {
					return {
						rowspan: 0,
						colspan: 0
					}
				}
			}
		},
		selectAllVenueMethod() {
			if (this.selectAllVenue) {
				this.venueCodes = []
				for (const item of this.venueNameList) {
					this.venueCodes.push(item.gameCode)
				}
			} else {
				this.venueCodes = []
			}
			this.getData()
		},
		venueCodesChange() {
			this.pageNum = 1

			this.getData()
		},
		handleCurrentChange(value) {
			this.pageNum = value
			this.getData()
		},
		handleSizeChange(value) {
			this.pageNum = 1
			this.pageSize = value
			this.getData()
		},
		// 获取代理账号信息
		getData() {
			this.loading = true
			const timeArr = this.searchTime
			let venueCode = []
			this.data = []
			if (this.curData.venueName === '全部') {
				venueCode = this.venueCodes.join(',')
			} else {
				const venueCodeVal = {
					体育: 'ty',
					彩票: 'cp',
					hc彩票: 'hccp',
					真人: 'zr',
					电竞: 'dj'
				}
				venueCode = venueCodeVal[this.curData.venueName]
			}
			const startDateObj = dayjs(timeArr[0], 'YYYYMMDD')
			const endDateObj = dayjs(timeArr[1], 'YYYYMMDD')
			const startDatePrev = startDateObj.subtract(1, 'day')
			const endDatePrev = endDateObj.subtract(1, 'day')
			const startDateStr = startDatePrev.format('YYYYMMDD')
			const endDateStr = endDatePrev.format('YYYYMMDD')
			const params = {
				...this.getParams(),
				reportDate: this.curData.reportDate,
				// proxyId: this.curData.proxyId,
				proxyId: this.curData.proxyId,
				venueCode: venueCode,
				startDate: startDateStr,
				endDate: endDateStr
			}
			this.$api
				.proxyTeamRebateAmountMemberOrderList(params)
				.then((res) => {
					this.loading = false

					this.data = this.resultFn(res.data.record)
					this.total = res.data.totalRecord
				})
				.catch(() => {
					this.loading = false
				})
		},
		resultFn(arrData) {
			var result = arrData.flatMap((item, index) => {
				// 遍历proxyMemberRecalculateBetRecordList数组
				return item.proxyMemberRecalculateBetRecordList.map(
					(record, recordIndex) => {
						// 复制当前item对象的属性（除了proxyMemberRecalculateBetRecordList）
						var newItem = {
							...item, // 使用展开运算符复制对象的所有属性
							// 如果不是第一个元素，则删除proxyMemberRecalculateBetRecordList属性
							...(recordIndex === 0
								? {
										proxyMemberRecalculateBetRecordList:
											item
												.proxyMemberRecalculateBetRecordList
												.length,
										teamRebateRateParent:
											item.teamRebateRate,
										validBetAmountRecalculateAdjustParent:
											item.validNetAmountRecalculateAdjust,
										teamRebateAmountRecalculateAdjustParent:
											item.teamRebateAmountRecalculateAdjust
								  }
								: {})
						}
						// 删除proxyMemberRecalculateBetRecordList属性（只保留在第一个元素中）
						if (recordIndex !== 0) {
							newItem.towShow = true
							delete newItem.proxyMemberRecalculateBetRecordList
						}

						// 合并record对象的属性
						return { ...newItem, ...record }
					}
				)
			})
			return result
		},
		handleClose() {
			this.$emit('update:visible', false)
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .rempadding .el-dialog__header {
	color: #909399;
	font-weight: 700;
}
::v-deep .rempadding .el-dialog__body {
	padding: 0;
	padding-bottom: 30px;
	.contentBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.contentBox,
	form {
		padding: 0 20px;
	}
}

::v-deep .el-icon-question:after {
	font-size: 16px;
	margin-left: 0;
}
.paginationBox {
	text-align: center;
	margin: 0 auto;
}
</style>
